const HtmlWebPackPlugin = require('html-webpack-plugin') // html解析
const MiniCssExtractPlugin = require('mini-css-extract-plugin') // 导出独立的css
const CleanWebpackPlugin = require('clean-webpack-plugin');//清除插件 每次打包前删除就文件
const path=require('path');


module.exports = {
	// 入口 默认会寻找index.js文件
	// home是输出后的文件名（可以改）
	entry: {
			index: "./src/index.js",
	},
	output:{
				// 定义输出文件名 可以覆盖entry中的定义 [name]是entry中定义的文件名
				//chunkhash产生随机文件名
        filename:'[name].[chunkhash].js', 
        path:path.resolve(__dirname,'dist'),
  },
  module: {
    rules: [ // 配置各类型文件解析
      {
        test: /\.js$/,
        exclude: /node_modules/, // 忽略的目录
        use: {
          loader: 'babel-loader' // 语言翻译 es6-->es5
        }
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: 'html-loader', //html解析 这个东西会帮助你在html动态的引入js和css
            options: { minimize: true } // 是否压缩html
          }
        ]
      },
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader'] // css解析+导出独立的css
      }
    ]
  },
	// 本地服务配置
	devServer: {
		contentBase: path.join(__dirname, './dist'), // URL的根目录。如果不设定的话，默认指向项目根目录
		port: 7411,
		historyApiFallback: true, // 任意的404响应都被替代为index.html。
		// 如果你希望服务器外部可以访问，指定如下：host: "0.0.0.0"。比如你用手机通过IP访问。
		// 手机和电脑要在同一个网段 比如共享网络 同一个wifi
		host: '0.0.0.0' ,
		// 接口代理
		// proxy: {// 把我们的API请求，代理到json-server服务器去。
		// // 访问/api/qwer 实际访问http://localhost:8090/$1/api/qwer
		//       "/api/*": "http://localhost:8090/$1"
		//  }
	},
  plugins: [
		new CleanWebpackPlugin(),//默认清除webpack输出目录下的所有东西
    new HtmlWebPackPlugin({
      template: './src/index.html',
      filename: './index.html'
    }),
    new MiniCssExtractPlugin() // 导出独立的css
  ]
}